<template>
  <el-table-column v-bind="$attrs" v-on="$listeners">
    <template #default="scope">
      <slot name="defalut" v-bind="scope" v-if="!editorIndex[scope.$index]">
        <span @click="handleClick(scope)" style="cursor: pointer">{{ scope.row[scope.column.property] }}</span>
      </slot>
      <slot name="editor" v-bind="scope" v-else>
        <component :is="editorComponent"  v-bind="$attrs" v-model="scope.row[scope.column.property]"></component>
      </slot>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <component :is="targetComp"></component>
      </el-dialog>
    </template>
  </el-table-column>
</template>
<script>

export default {
  name: 'TableEditorColumnComp',
  inject: ['editorIndex'],
  props: ['targetComp'],
  data(){
    return {
      dialogVisible: false,
    }
  },
  methods: {
    handleClick() {
      this.dialogVisible = true
    },
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
  }
  
}
</script>